/* @flow */

import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {addNavigationHelpers, StackNavigator, DrawerNavigator, TabNavigator, NavigationActions} from 'react-navigation';

import AppHome from './AppHome.js' //首页
import AppCommunity from './AppCommunity.js' //社区
import AppFind from './AppFind.js' //发现
import AppSearch from './AppSearch.js' //搜索
import AppMine from './AppMine.js' //我的
import AppSetting from './AppSetting.js'

const RootTab = TabNavigator(
//RouteConfigs
{
  home: {
    screen: AppHome,
    navigationOptions: {
      title: '首页'
    }
  },
  find: {
    screen: AppFind,
    navigationOptions: {
      title: '发现'
    }
  },
  community: {
    screen: AppCommunity,
    navigationOptions: {
      title: '社区'
    }
  },
  setting: {
    screen: AppSetting,
    navigationOptions: {
      title: '设置'
    }
  }
},
//NavigatorConfig
{
  initialRouteName: 'home', //默认组件
  initialRouteParams: {
    name: '默认name'
  },

  tabBarVisible: true,
  swipeEnabled: true,
  tabBarPosition: 'bottom',

  animationEnabled: true,
  lazy: false,
  backBehavior: 'none', //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
  // tabBarComponent: TabBarBottom,
  // tabBarLabel: 'label',

  tabBarOptions: {
    // activeTintColor: 'green',//label和icon的前景色 活跃状态下
    // inactiveTintColor: 'white',//label和icon的前景色 不活跃状态下
    // activeBackgroundColor: '#3ab7f5',//label和icon的背景色 活跃状态下
    // inactiveBackgroundColor: 'gray',//label和icon的背景色 不活跃状态下

    showLabel: true, //是否显示label，默认开启 style：tabbar的样式
    showIcon: true,
    scrollEnabled: true, //whether to enable scrollable tabs

    // upperCaseLabel: true,//whether to make label uppercase, default is true
    // pressColor: 0.6,//color for material ripple
    // pressOpacity: 0.4,//opacity for pressed tab (iOS and Android < 5.0 only)

    indicatorStyle: {
      height: 0,
    },
    labelStyle:{
      marginTop:4,
      fontSize:10,
    },//label的样式安卓属性
    tabStyle: {
      // backgroundColor: 'pink'
    }, //tabBar的样式
    iconStyle:{
      marginTop:-3,
    },//style object for the tab icon

  }, //配置标签栏的一些属性iOS属性
})

const RootStack = StackNavigator(
//RouteConfigs
{
  AppSearch: {
    screen: AppSearch,
    navigationOptions: {

    },
    path: 'page/search'
  }
},
//StackNavigatorConfig
{
  //基本默认配置
  initialRouteName: 'AppSearch', //默认显示的screen的 路由名字
  initialRouteParams: {
    name: '搜索🔍'
  }, //默认screen的 参数
  mode: 'modal', //card   modal;
  headerMode: 'float', //float screen  none;
  cardStyle: {
    backgroundColor: 'lightgray'
  },

  //navigation配置
  navigationOptions: {
    // title: '默认标题', //默认标题
    headerTintColor: 'blue', //header前景色颜色
    cardStack: {
      gesturesEnabled: true
    }
  },

  //响应事件
  // onTransitionStart: () => console.log('onTransitionStart:'+'导航栏切换开始'),
  // onTransitionEnd: () => console.log('onTransitionEnd:'+'导航栏切换结束'),
}
)



class AppWithNavigationState extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>I'm the MyComponent component</Text>
        <Button onPress={this._pushAction} title='push action'></Button>
      </View>
    );
  }

  _pushAction = () => {

    console.log('pushAction');

  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

// export default  {RootStack,RootTab,AppWithNavigationState};

export RootTab;
export RootStack;
export AppWithNavigationState;

//store 中存储的状态绑定
// const mapStateToProps = state => ({nav: state.nav});

//KR-3 导出并关联 state的map  && APP对象
//代表当前APP对象的一些action 的 type ，由 mapStateToProps 来解析对应。
// export default connect(mapStateToProps)(AppWithNavigationState);
